import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
import routes from './routes'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import '@/common/js/permission'
import echarts from 'echarts'
import dayjs from 'dayjs'


axios.defaults.baseURL = 'http://localhost:8080';

Vue.prototype.dayjs = dayjs;
Vue.prototype.$echarts = echarts
//配置axios的全局基本路径
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

const router = new VueRouter({
  routes
})


// 1.配置路由拦截器，作用是判断当前用户是否登录如果没有那么跳转到login页面
router.beforeEach((to, from, next) => {
  // 1.判断用户访问的路由路径是否是login
  // debugger
  if (to.path == '/login' || to.path == '/register') {
    // 1.1.如果访问的是登录页面或者是注册页面，那么清除缓存中的用户信息
    if (localStorage.getItem('Authorization')) {
      localStorage.removeItem('Authorization')
      localStorage.removeItem('user');
      localStorage.removeItem('permissionSns');
      localStorage.removeItem('menus');

      // 清除浏览器路由缓存记录
      location.reload();
    }

    // 1.2.如果想要访问登录页面那么放行
    next();
  } else {
    2.// 用户想要访问的路由不是登录页面，那么我们应该判断是否登录，没有登录跳转到登录页面
    // 2.1.获取到localStorage中的用户信息
    // debugger
    let Authorization = localStorage.getItem('Authorization');
    if (Authorization) {
      // 2.2.如果缓存中用户信息不为空，说明已登录，那么放行
      let jwt = require('jsonwebtoken');

      let userInfo = jwt.decode(Authorization);
      if (userInfo && userInfo.payload.permissionSns && userInfo.payload.menus && userInfo.payload.user) {
        next();
        return;
      }
    }
    next({ path: '/login' });
  }
})
// request拦截器
//2.配置axios前置拦截器，作用是让所有axios请求携带token，后台需要token校验是否登录
axios.interceptors.request.use(config => {
  // debugger
  // 1.从缓存中获取到token
  let authorization = localStorage.getItem("Authorization");
  // 2.如果token不为null，那么设置到请求头中，此处哪怕为null，我们也不进行处理，因为后台会进行拦截
  if (authorization) {
    config.headers['Authorization'] = authorization;
  }
  // 3.放行
  return config;
}, error => {
  Promise.reject(error);
})


//3.配置axios后置拦截器，作用是为了得到后端的拦截器响应结果
//  前端需要知道用户是否登录，如果响应是 code=401 那么说明用户未登录，直接跳转到登录页面
axios.interceptors.response.use(result => {
  // 1.获取到后端的响应结果
  let data = result.data;
  // 2.判断如果后端响应是success=false&code=401，那就说明在后端拦截器中被拦截下来了，那么跳转到登录页面
  if (!data.success && data.code === 401) {
    // 跳转登录页面
    router.push({ path: '/login' });
    Promise.reject(data.msg);
  }
  // 3.放行
  return result;
}, error => {
  Promise.reject(error);
})

//每次路由之前都要执行,每次请求都要经过路由
//每次请求都不拦截到


// 调用一次动态加载路由配置，防止页面刷新路由失效
initIndexRouters();
function initIndexRouters() {
  if (!localStorage.menus) {
    return;
  }
  //防止重复配置路由：4就是main.js中路由的个数 - 如果你的静态路由是6个这里要写成6
  if (router.options.routes.length > 4) {
    return;
  }
  let menus = localStorage.getItem('menus');
  menus = JSON.parse(menus);
  let tempRouters = [];
  menus.forEach(menu => {
    let indexRouter = {
      path: '/',
      iconCls: menu.icon,
      name: menu.name,
      component: resolve => require(['@/views/Home'], resolve),
      children: []
    }
    menu.children.forEach(cMenu => {
      let cr = {
        path: cMenu.url,
        name: cMenu.name,
        component: resolve => require(['@/views/' + cMenu.component], resolve)
      }
      indexRouter.children.push(cr)
    })
    tempRouters.push(indexRouter)
    router.options.routes.push(indexRouter)
  })
  //动态路由配置
  router.addRoutes(tempRouters);
}

new Vue({
  router,
  store,
  render: h => h(App) // index.html id为app的div标签下面使用<App/>和template: '<App/>',一样的效果
}).$mount('#app') // 和el: '#app'效果一样都是挂载在index.html id为app的div标签上面

